<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js"></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}

#user{
	background:url(images/user_white.png) no-repeat center;
	width:32px; 
	height:45px; 
	float:right;
	
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

table td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-section {
	background-color: #FFF;
	text-align: left;
	padding: 8px;
	margin-top: 8px;
}

.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.td-product-name {
 	background:#b6a98f; 
 	color:#FFFFFF; 
 	font-weight:bold;
 	line-height:25px;
 	text-align: left;
 }
 
 .td-spec {
 	text-align: left;
 }

.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.bitButton1{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}

.smallButton{ 
	border:0;
	background:url(images/button_bg.jpg) repeat; 
	color:#FFFFFF; 
	line-height:28px; 
	text-align:center;
	height:30px; 
	margin-top:10px;	
}
.smallButton1{border:0;height:22px; background:url(images/button_back.jpg) repeat; color:#FFFFFF; text-align:center;}

.table-receive {
	width: 100%;
}
.table-receive td{
	border-bottom:1px dotted #CCC;
	text-align: left;
	padding-top: 10px;
}

.input-common{width:100%;padding:0 10px;margin:6px 0;height:46px;font-size:16px;border-radius:3px;border:1px #ccc solid;background:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="name">新增收件人</li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<div class="div-section">
			<form id="form-addressee">
				<input type="hidden" name="p_name" id="p_name"/>
				<input type="hidden" name="c_name" id="c_name"/>
				<input type="hidden" name="a_name" id="a_name"/>
				<table width="100%" border="0" cellspacing="0" cellpadding="3" style="font-size: 12px;">
					<tr>
						<td height="20" align="left" valign="middle" nowrap="nowrap"><input
							placeholder="收件人姓名" name="rec_name" type="text"
							class="input-common" id="rec_name" style="width: 100%" value="" /></td>
					</tr>
					<tr>
						<td height="17" align="left" valign="middle" nowrap="nowrap"><input
							placeholder="收件人电话" name="phone" type="text"
							class="input-common" id="phone" style="width: 100%" value="" /></td>
					</tr>
					<tr>
						<td height="17" align="left" valign="middle" nowrap="nowrap">
							<select name="province" class="input-common" id="province"  style="color: #aaa;"
							onchange="getCity()">
								<option value="" selected="selected">省份/直辖市</option>
						</select>
						</td>
					</tr>
					<tr>
						<td height="17" align="left" valign="middle" nowrap="nowrap">
							<select name="city" class="input-common" id="city" onchange="getArea()" style="color: #aaa;">
								<option value="">城市</option>
						</select>
						</td>
					</tr>
					<tr>
						<td height="17" align="left" valign="middle" nowrap="nowrap">
							<select name="area" class="input-common" id="area" style="color: #aaa;" onchange="changeTextColor()">
								<option value="">区/县/市</option>
						</select>
						</td>
					</tr>
					<tr>
						<td height="17" align="left" valign="middle" nowrap="nowrap"><textarea
								placeholder="详细地址" name="address" class="input-common"
								id="address" style="width: 100%;height:80px"></textarea></td>
					</tr>
					<tr>
						<td height="17" align="center" valign="middle" nowrap="nowrap"><input
							name="button4" type="button" class="bitButton" id="button4" onclick="addAddressee()"
							value="添  加" /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	
	
	
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom" style="display: none">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		getProvince();
	});
	
	function addAddressee() {
		var url = "/addressee/add";
		var params = $("#form-addressee").serialize();
		cjl.post(url, params, function(body) {
			window.location.href="addressee.html";
		});
	}
	
	//省
	function getProvince(){
		var p_name = $("#p_name").val();
		var url = "/region/province";
		$.getJSON(url, function(json){
			var html = '';
			html += '<option value="">省份/直辖市</option>';
			for(var i=0;i<json.length;i++){
				html += '<option value="'+json[i].province+'"';
				if(json[i].province == p_name){
					html += 'selected="selected"';
				}
				html += '>'+json[i].province+'</option>'
			}
			$("#province").html(html);
		});
	}

	function getCity(){
		$("#province").css({"color":"#000"});
		$("#area").html('<option value="">区/县/市</option>');
		
		var province = $("#province").val();
		var p_name = $("#p_name").val();
		var c_name = $("#c_name").val();
		if(province == ''){ province = p_name;	}
		var url = "/region/city";
		$.getJSON(url, {province:province}, function(json){
			var html = '';
			html += '<option value="">城市</option>';
			for(var i=0;i<json.length;i++){
				html += '<option value="'+json[i].city+'"';
				if(json[i].city == c_name){
					html += 'selected="selected"';
				}
				html += '>'+json[i].city+'</option>'
			}
			$("#city").html(html);
		});
	}

	function getArea(){
		$("#city").css({"color":"#000"});
		var city = $("#city").val();
		var a_name = $("#a_name").val();
		var c_name = $("#c_name").val();
		if(city == ''){ city = c_name; }
		var url = "/region/area";
		$.getJSON(url,{city:city}, function(json){
			var html = '';
			html += '<option value="">区/县/市</option>';
			for(var i=0;i<json.length;i++){
				html += '<option value="'+json[i].area+'"';
				if(json[i].area == a_name){
					html += 'selected="selected"';
				}
				html += '>'+json[i].area+'</option>'
			}
			$("#area").html(html);
		});
	}
	
	function changeTextColor() {
		$("#area").css({"color":"#000"});
	}
	
</script>
</html>